import React, { useState, useEffect, useRef } from 'react';
import { withRouter } from 'react-router-dom';
import { getHousingList, getHousingParams, getTables, getAreaCondition } from '../../utils/http';
import { Breadcrumb, Button, Pagination, Select, Space, Table, Tag, type TableProps } from 'antd';
import './housing.css'
// 通用处理函数，暂时保留以避免影响其他组件
function Housing(props: any) {
  const { history } = props;
  // 状态管理
  const [cities, setCities] = useState<any[]>([]);
  const [selectedCity, setSelectedCity] = useState('');
  
  // 区域相关状态
  const [areas, setAreas] = useState<any[]>([]);
  const [selectedArea, setSelectedArea] = useState('');
  
  // 房屋参数状态
  const [housingParams, setHousingParams] = useState<any[]>([]);
  const [selectedParams, setSelectedParams] = useState<any[]>([]);
  
  // 防抖定时器引用
  const searchTimerRef = useRef<number | null>(null);
  
  // 楼层状态
  const [floorOptions, setFloorOptions] = useState<any[]>([]);
  const [selectedFloor, setSelectedFloor] = useState('');
  
  // 房屋亮点状态
  const [supportingOptions, setSupportingOptions] = useState<any[]>([]);
  const [selectedSupporting, setSelectedSupporting] = useState<any[]>([]);
  
  // 房屋朝向状态
  const [orientedOptions, setOrientedOptions] = useState<any[]>([]);
  const [selectedOriented, setSelectedOriented] = useState('');
  
  // 出租方式状态
  const [selectedRentType, setSelectedRentType] = useState('不限');
  
  // 价格区间状态
  const [selectedPriceRange, setSelectedPriceRange] = useState('不限');
  
  // 房源列表状态
  const [housingList, setHousingList] = useState<any[]>([]);
  const [totalCount, setTotalCount] = useState<number>(0);
  const [loading, setLoading] = useState<boolean>(false);
  
  // 分页相关状态
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [pageSize, setPageSize] = useState<number>(5); // 初始每页显示5条数据

  // 城市选择处理函数
  const handleCityChange = async (value: string) => {
    setSelectedCity(value);
    setSelectedArea(''); // 重置区域选择
    setCurrentPage(1); // 重置到第一页
    // 当选择城市后，获取该城市的区域数据和房源列表
    if (value) {
      await fetchAreaData(value);
      await fetchHousingList(value, 1, pageSize);
    } else {
      setAreas([]); // 清空区域数据
      setHousingList([]);
      setTotalCount(0);
    }
  };
  
  // 区域选择处理函数 - 实现区域选择后的房源过滤和双向数据绑定
  const handleAreaChange = (value: string) => {
    // 双向数据绑定：更新selectedArea状态
    setSelectedArea(value);
    setCurrentPage(1); // 重置到第一页
    
    // 当选择城市和区域ID后，根据区域ID过滤房源数据
    if (selectedCity) {
      if (value) {
        console.log('选择区域ID:', value, '开始过滤对应区域房源');
        filterHousingByArea(selectedCity, value, 1, pageSize);
      } else {
        // 如果清除区域选择，则重新获取该城市的所有房源
        console.log('清除区域选择，获取城市所有房源');
        fetchHousingList(selectedCity, 1, pageSize);
      }
    }
  };
  
  // 分页变化处理函数 - 支持页码切换和快速跳转
  const handlePageChange = (page: number, pageSize: number) => {
    // 验证页码有效性
    const totalPages = Math.ceil(totalCount / pageSize);
    const validPage = Math.max(1, Math.min(page, totalPages || 1));
    
    // 重要：先更新状态
    setCurrentPage(validPage);
    setPageSize(pageSize);
    
    console.log('分页变化：请求页码=', page, '有效页码=', validPage, '每页大小=', pageSize);
    
    // 确保在有城市选择的情况下才进行数据请求
    if (selectedCity) {
      // 检查是否有其他筛选条件
      const hasOtherFilters = selectedParams.length > 0 || selectedFloor || 
                           selectedSupporting.length > 0 || selectedOriented ||
                           selectedRentType !== '不限' || selectedPriceRange !== '不限';
      
      // 根据是否有筛选条件调用不同的函数获取数据
      if (selectedArea || hasOtherFilters) {
        filterHousingByAllConditions(selectedCity, validPage, pageSize);
      } else {
        fetchHousingList(selectedCity, validPage, pageSize);
      }
    }
  };
  
  // 根据区域ID过滤房源的函数 - 实现根据地区ID渲染不同数据列表
  const filterHousingByArea = async (cityId: string, areaId: string, page: number = currentPage, size: number = pageSize) => {
    console.log('执行区域房源过滤，城市ID:', cityId, '区域ID:', areaId, '页码:', page);
    
    // 确保areaId被正确传递，实现根据区域ID过滤
    await searchHousesByConditions({
      cityId,
      area: areaId,  // 关键：传递区域ID作为过滤条件
      page,
      pageSize: size
    });
  };
  
  // 使用接口进行多条件搜索的函数 - 实现基于区域ID的数据过滤和双向绑定
  const searchHousesByConditions = async (conditions: {
    cityId: string;
    area?: string;
    page?: number;
    pageSize?: number;
    subway?: string;
    rentType?: string;
    price?: string;
    more?: string;
    roomType?: string;
    oriented?: string;
    characteristic?: string;
  }) => {
    setLoading(true);
    try {
      // 关键：记录区域ID条件，确保根据区域ID过滤
      console.log('使用接口进行搜索:', conditions, '区域ID:', conditions.area);
      
      // 构建筛选条件参数，特别注意area参数
      const filters = {
        area: conditions.area,  // 双向绑定：area参数直接影响数据过滤结果
        subway: conditions.subway,
        rentType: conditions.rentType,
        price: conditions.price,
        more: conditions.more,
        roomType: conditions.roomType,
        oriented: conditions.oriented,
        characteristic: conditions.characteristic
      };
      
      // 调用getTables函数，传递城市ID、分页参数和筛选条件
      // 确保页码参数正确传递，默认为第1页
      const pageToUse = conditions.page !== undefined ? conditions.page : 1;
      const sizeToUse = conditions.pageSize !== undefined ? conditions.pageSize : 5; // 每页显示5条数据
      
      console.log('调用getTables：城市ID=', conditions.cityId, '页码=', pageToUse, '每页大小=', sizeToUse, '区域筛选条件=', filters.area);
      
      // 双向数据绑定核心：通过filters传递area参数，确保根据区域ID获取对应数据
      // 计算start和end参数，满足API要求的开始项和结束项
      const start = (pageToUse - 1) * sizeToUse + 1; // 开始项，从1开始计数
      const end = 2000; // 结束项，固定为2000以获取更多数据
      
      const res = await getTables(
        conditions.cityId,
        pageToUse,
        sizeToUse,
        filters,
        start,  // 开始项参数
        end     // 结束项参数
      );
      
      console.log('接口响应:', res);
      
      // 处理响应数据 - 适配响应拦截器处理后的数据格式
      // 统一处理API响应
      if (res && res.body) {
        // 标准分页响应格式
        if (Array.isArray(res.body.list)) {
          // 关键日志：记录区域ID与返回数据的关系
          console.log('区域ID:', filters.area, '获取数据：页码=', pageToUse, '返回列表长度=', res.body.list.length, '总数量=', res.body.totalCount);
          // 双向绑定：根据区域ID过滤后的数据更新到housingList状态，实现视图更新
          setHousingList(res.body.list);
          // 确保总数量正确设置，限制最大渲染2000条数据
        const total = typeof res.body.totalCount === 'number' ? res.body.totalCount : res.body.list.length;
        setTotalCount(total > 0 && total <= 2000 ? total : 2000);
        } else if (Array.isArray(res.body)) {
          // 兼容接口直接返回数据列表的情况
          console.log('获取数据：页码=', pageToUse, '返回列表长度=', res.body.length);
          setHousingList(res.body);
          // 添加最大值限制，最大渲染2000条数据
        const total = res.body.length;
        setTotalCount(total > 0 && total <= 2000 ? total : 2000);
        } else {
          console.warn('未预期的响应体格式:', res.body);
          setHousingList([]);
          setTotalCount(0);
        }
      } else if (Array.isArray(res)) {
        // 兼容直接返回数组的情况
        console.log('获取数据：页码=', pageToUse, '返回列表长度=', res.length);
        setHousingList(res);
        // 添加最大值限制，最大渲染2000条数据
        const total = res.length;
        setTotalCount(total > 0 && total <= 2000 ? total : 2000);
      } else {
        console.warn('未预期的响应格式:', res);
        setHousingList([]);
        setTotalCount(0);
      }
    } catch (error) {
      console.error('搜索失败:', error);
      setHousingList([]);
      setTotalCount(0);
    } finally {
      setLoading(false);
    }
  };
  
  // 根据所有筛选条件过滤房源的函数 - 使用接口进行搜索
  const filterHousingByAllConditions = async (cityId: string, page: number = currentPage, size: number = pageSize) => {
    await searchHousesByConditions({
      cityId,
      area: selectedArea,
      rentType: selectedRentType,
      price: selectedPriceRange,
      roomType: selectedParams.join(','), // 将数组转为逗号分隔的字符串
      oriented: selectedOriented,
      characteristic: selectedSupporting, // 将数组转为逗号分隔的字符串
      page,
      pageSize: size
    });
  };
  
  // 获取区域数据的函数 - 双向绑定：确保区域选项与城市选择同步
  const fetchAreaData = async (cityId: string) => {
    try {
      const res = await getAreaCondition(cityId);
      console.log('区域数据响应:', res);
      
      // 处理API响应，提取区域数据
      if (res && res.body && res.body.area && res.body.area.children) {
        // 转换区域数据为Select组件需要的格式
        const areaOptions = res.body.area.children.map((area: any) => ({
          value: area.value,  // 区域ID作为value，用于双向绑定
          label: area.label
        }));
        
        // 双向绑定：更新区域选项列表
        setAreas(areaOptions);
        
        // 重要：当区域列表更新时，如果有默认区域或之前选中的区域在新列表中存在，则保持选中状态
        // 否则清除选中状态，避免无效的区域ID
        const hasSelectedAreaInNewOptions = areaOptions.some(option => option.value === selectedArea);
        if (!hasSelectedAreaInNewOptions && selectedArea) {
          console.log('当前选中的区域ID:', selectedArea, '在新的城市区域列表中不存在，清除选中状态');
          setSelectedArea('');
        }
      } else {
        console.error('无效的区域数据格式:', res);
        setAreas([]);
        setSelectedArea(''); // 清除无效的选中状态
      }
    } catch (error) {
      console.error('获取区域数据失败:', error);
      setAreas([]);
      setSelectedArea(''); // 清除无效的选中状态
    }
  };
  
  // 获取房源列表的函数 - 使用接口获取数据
  const fetchHousingList = async (cityId?: string, page?: number, size?: number) => {
    const targetCityId = cityId || selectedCity;
    const targetPage = page || currentPage;
    const targetSize = size || pageSize;
    
    if (!targetCityId) return;
    
    setLoading(true);
    try {
      // 直接调用多条件搜索函数，使用当前所有筛选条件
      await searchHousesByConditions({
        cityId: targetCityId,
        area: selectedArea,
        page: targetPage,
        pageSize: targetSize,
        rentType: selectedRentType,
        price: selectedPriceRange,
        roomType: selectedParams.join(','),
        oriented: selectedOriented,
        characteristic: selectedSupporting
      });
    } catch (error) {
      console.error('获取房源列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 组件卸载时清理计时器
  useEffect(() => {
    return () => {
      if (searchTimerRef.current) {
        clearTimeout(searchTimerRef.current);
      }
    };
  }, []);
  // 房屋类型选择处理函数
  const handleParamsChange = (value: string[]) => {
    setSelectedParams(value);
    setCurrentPage(1); // 重置到第一页
    triggerSearch();   // 触发搜索
  };
  
  // 楼层选择处理函数
  const handleFloorChange = (value: string) => {
    setSelectedFloor(value);
    setCurrentPage(1); // 重置到第一页
    triggerSearch();   // 触发搜索
  };
  
  // 房屋亮点选择处理函数
  const handleSupportingChange = (value: string[]) => {
    setSelectedSupporting(value);
    setCurrentPage(1); // 重置到第一页
    triggerSearch();   // 触发搜索
  };
  
  // 房屋朝向选择处理函数
  const handleOrientedChange = (value: string) => {
    setSelectedOriented(value);
    setCurrentPage(1); // 重置到第一页
    triggerSearch();   // 触发搜索
  };
  
  // 出租方式选择处理函数
  const handleRentTypeChange = (value: string) => {
    setSelectedRentType(value);
    setCurrentPage(1); // 重置到第一页
    triggerSearch();   // 触发搜索
  };
  
  // 价格区间选择处理函数
  const handlePriceRangeChange = (value: string) => {
    setSelectedPriceRange(value);
    setCurrentPage(1); // 重置到第一页
    triggerSearch();   // 触发搜索
  };
  
  // 防抖搜索计时器引用已在文件顶部定义

  // 触发防抖搜索
  const triggerSearch = () => {
    // 清除之前的计时器
    if (searchTimerRef.current) {
      clearTimeout(searchTimerRef.current);
    }
    
    // 设置新的计时器，延迟300ms执行搜索
    searchTimerRef.current = setTimeout(() => {
      if (selectedCity) {
        searchHousesByConditions({
          cityId: selectedCity,
          area: selectedArea,
          page: currentPage,
          pageSize,
          rentType: selectedRentType,
          price: selectedPriceRange,
          roomType: selectedParams.join(','), // 将房屋类型数组转为逗号分隔的字符串
          oriented: selectedOriented,
          characteristic: selectedSupporting
        });
      }
    }, 300);
  };

  // 查询按钮处理函数 - 立即执行搜索
  const handleSearch = async () => {
    if (!selectedCity) {
      // 如果没有选择城市，可以提示用户
      console.warn('请先选择城市');
      return;
    }
    
    // 重置到第一页
    setCurrentPage(1);
    
    // 清除防抖定时器，立即执行搜索
    if (searchTimerRef.current) {
      clearTimeout(searchTimerRef.current);
    }
    
    // 立即执行搜索
    await searchHousesByConditions({
      cityId: selectedCity,
      area: selectedArea,
      page: 1,
      pageSize,
      rentType: selectedRentType,
      price: selectedPriceRange,
      roomType: selectedParams.join(','),
      oriented: selectedOriented,
      characteristic: selectedSupporting.join(',')
    });
  };
  
  // 重置按钮处理函数
  const handleReset = () => {
    // 重置所有选择状态
    setSelectedCity('');
    setSelectedArea('');
    setSelectedParams([]);
    setSelectedFloor('');
    setSelectedSupporting([]);
    setSelectedOriented('');
    setSelectedRentType('不限');
    setSelectedPriceRange('不限');
    
    // 重置分页状态
    setCurrentPage(1);
    setPageSize(5);
    
    // 清除防抖定时器
    if (searchTimerRef.current) {
      clearTimeout(searchTimerRef.current);
    }
    
    // 清空房源列表
    setHousingList([]);
    setTotalCount(0);
    
    // 清空区域数据
    setAreas([]);
  };
  // 监听所有筛选条件变化，实现实时搜索和双向数据绑定
  useEffect(() => {
    // 双向数据绑定核心：当selectedArea(区域ID)变化时，自动触发数据刷新
    console.log('筛选条件变化，区域ID:', selectedArea, '触发数据刷新');
    
    if (selectedCity) {
      // 清除之前的计时器，确保最新的区域ID立即生效
      if (searchTimerRef.current) {
        clearTimeout(searchTimerRef.current);
      }
      
      // 直接触发搜索，确保区域ID变化立即反映到数据列表
      searchTimerRef.current = setTimeout(() => {
        searchHousesByConditions({
          cityId: selectedCity,
          area: selectedArea,  // 双向绑定：将当前区域ID传递给搜索函数
          page: 1,  // 区域变化时重置到第一页
          pageSize,
          rentType: selectedRentType,
          price: selectedPriceRange,
          roomType: selectedParams.join(','),
          oriented: selectedOriented,
          characteristic: selectedSupporting
        });
      }, 200); // 稍微缩短防抖时间，提高响应速度
    }
    
    // 组件卸载时清除计时器
    return () => {
      if (searchTimerRef.current) {
        clearTimeout(searchTimerRef.current);
      }
    };
  }, [selectedArea, selectedParams, selectedFloor, selectedSupporting, 
      selectedOriented, selectedRentType, selectedPriceRange, pageSize]);
  
  // 获取城市数据
  useEffect(() => {
    const fetchCities = async () => {
      try {
        const res = await getHousingList();
        // 假设API返回的数据结构是{cities: [{value: 'beijing', label: '北京'}, ...]}
        // 如果结构不同，需要根据实际返回调整
        if (res && res.body && Array.isArray(res.body)) {
          setCities(res.body);
        } else if (Array.isArray(res.body)) {
          // 如果直接返回城市数组，则需要转换格式
          setCities(res.body.map((city: any) => ({
            value: city.value || city.id || city.name,
            label: city.label || city.name
          })));
        }
      } catch (error) {
        console.error('获取城市数据失败:', error);
      }
    };

     const fetchParams = async () => {
       try {
         const res = await getHousingParams();
         // 处理房屋类型数据
         if (res && res.body.roomType && Array.isArray(res.body.roomType)) {
           setHousingParams(res.body.roomType);
         } else if (Array.isArray(res.body.roomType)) {
           // 如果需要转换格式
           setHousingParams(res.body.roomType.map((item: any) => ({
             value: item.value || item.id || item.name,
             label: item.label || item.name
           })));
         }
         
         // 处理楼层数据
         if (res && res.body.floor && Array.isArray(res.body.floor)) {
           setFloorOptions(res.body.floor);
         } else if (Array.isArray(res.body.floor)) {
           setFloorOptions(res.body.floor.map((item: any) => ({
             value: item.value || item.id || item.name,
             label: item.label || item.name
           })));
         }
         
         // 处理房屋亮点数据
         if (res && res.body.supporting && Array.isArray(res.body.supporting)) {
           setSupportingOptions(res.body.supporting);
         } else if (Array.isArray(res.body.supporting)) {
           setSupportingOptions(res.body.supporting.map((item: any) => ({
             value: item.value || item.id || item.name,
             label: item.label || item.name
           })));
         }
         
         // 处理房屋朝向数据
         if (res && res.body.oriented && Array.isArray(res.body.oriented)) {
           setOrientedOptions(res.body.oriented);
         } else if (Array.isArray(res.body.oriented)) {
           setOrientedOptions(res.body.oriented.map((item: any) => ({
             value: item.value || item.id || item.name,
             label: item.label || item.name
           })));
         }
      } catch (error) {
        console.error('获取城市数据失败:', error);
      }
    };

    fetchCities();
    fetchParams();
  }, []);

// 定义房源数据类型
interface HousingData {
  key: string;
  houseImg: string;
  title: string;
  desc: string;
  price: number;
  tags: string[];
  houseCode: string;
}


const columns: TableProps<HousingData>['columns'] = [
  {
    title: '房屋图片',
    dataIndex: 'houseImg',
    key: 'houseImg',
    render: (text: string) => (
      <img src={text} alt="房屋图片" style={{ width: 80, height: 60, objectFit: 'cover' }} />
    ),
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '描述',
    dataIndex: 'desc',
    key: 'desc',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
    render: (price: number) => `${price}元/月`,
  },
  {
    title: '标签',
    key: 'tags',
    dataIndex: 'tags',
    render: (tags: string[]) => (
      <>
        {tags.map((tag) => {
          let color = 'green';
          if (tag.includes('地铁') || tag.includes('交通')) {
            color = 'geekblue';
          } else if (tag.includes('新')) {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag}
            </Tag>
          );
        })}
      </>
    ),
  },
  {    title: '操作',    key: 'action',    render: (_: any, record: HousingData) => (      <Space size="middle">        <a onClick={() => history.push(`/details/${record.key}`)}>查看详情</a>        <a>编辑</a>        <a>删除</a>      </Space>    ),  },
];

// 准备房源数据，将API返回的数据转换为表格需要的格式
const prepareData = (list: any[]) => {
  return list.map((item, index) => ({
    key: item.houseCode || index.toString(),
    houseImg: 'http://localhost:8080'+item.houseImg || '',
    title: item.title || '',
    desc: item.desc || '',
    price: item.price || 0,
    tags: item.tags || [],
    houseCode: item.houseCode || '',
  }));
};
  return (
    <div>
      <div className="breadcrumb-container">
        <Breadcrumb
          separator=">"
          items={[
            {
              title: '首页',
              href: '/',
            },
            {
              title: '房源管理',
              href: '/housing',
            },
            {
              title: '房源列表',
            },
          ]}
        />
      </div>
      <div className='List'>

        <div className='chengshi'>
          <p>所在城市：</p>
          <Select
            placeholder="请选择城市"
            style={{ width: 180 }}
            onChange={handleCityChange}
            options={cities.length > 0 ? cities : [
              { value: 'loading', label: '加载中...' }
            ]}
            value={selectedCity}
          />
        </div>

        <div className='quyu'>
          <p>所属区域：</p>
          <Select
            placeholder="请选择区域"
            style={{ width: 180 }}
            onChange={handleAreaChange}  // 双向数据绑定：值变化时调用处理函数
            options={areas.length > 0 ? areas : [
              { value: '', label: '请先选择城市' }
            ]}
            value={selectedArea}  // 双向数据绑定：显示当前选中的值
            disabled={!selectedCity}
          />
        </div>

        <div className='chuzu'>
          <p>出租方式：</p>
          <Select
           placeholder="请选择出租方式"
            style={{ width: 180 }}
            onChange={handleRentTypeChange}
            options={[
              { value: '不限', label: '不限' },
              { value: '整租', label: '整租' },
              { value: '合租', label: '合租' }
            ]}
            value={selectedRentType}
          />
        </div>

        <div className='leixing'>
          <p>房屋类型：</p>
          <Select
            mode="multiple"
            placeholder="请选择房屋类型"
            style={{ width: 180 }}
            onChange={handleParamsChange}
            options={housingParams.length > 0 ? housingParams : [
              { value: 'loading', label: '加载中...' }
            ]}
            value={selectedParams}
          />
        </div>

        <div className='chaoxiang'>
          <p>房屋朝向：</p>
          <Select
            placeholder="请选择房屋朝向"
            style={{ width: 180 }}
            onChange={handleOrientedChange}
            options={orientedOptions.length > 0 ? orientedOptions : [
              { value: 'loading', label: '加载中...' }
            ]}
            value={selectedOriented}
          />
        </div>

        <div className='louceng'>
          <p>房屋楼层：</p>
          <Select
            placeholder="请选择房屋楼层"
            style={{ width: 180 }}
            onChange={handleFloorChange}
            options={floorOptions.length > 0 ? floorOptions : [
              { value: 'loading', label: '加载中...' }
            ]}
            value={selectedFloor}
          />
        </div>

        <div className='liangdian'>
          <p>房屋亮点：</p>
          <Select
            mode="multiple"
            placeholder="请选择房屋亮点"
            style={{ width: 180 }}
            onChange={handleSupportingChange}
            options={supportingOptions.length > 0 ? supportingOptions : [
              { value: 'loading', label: '加载中...' }
            ]}
            value={selectedSupporting}
          />
        </div>

        <div className='jiage'>
          <p>房屋价格：</p>
          <Select
          placeholder="请选择房屋价格"
            style={{ width: 180 }}
            onChange={handlePriceRangeChange}
            options={[
              { value: '不限', label: '不限' },
              { value: '1000以下', label: '1000以下' },
              { value: '1000-2000', label: '1000-2000' },
              { value: '2000-3000', label: '2000-3000' },
              { value: '3000-4000', label: '3000-4000' },
              { value: '4000-5000', label: '4000-5000' },
              { value: '5000-6000', label: '5000-6000' },
              { value: '6000-7000', label: '6000-7000' },
              { value: '7000以上', label: '7000以上' },
            ]}
            value={selectedPriceRange}
          />
        </div>

        <div className='anniu'>

          <Button color="primary" variant="solid" onClick={handleSearch}>
            查询
          </Button>
          <Button color="default" variant="solid" style={{marginLeft:20}} onClick={handleReset}>
            重置
          </Button>
        </div>
      </div>
          <div>
            <p>
              {/* 双向绑定反馈：显示当前选中的区域ID对应的房源数量 */}
              {selectedArea ? (
                <span>区域ID: {selectedArea} 房源数量: {totalCount} 套</span>
              ) : (
                <span>根据您的筛选条件为您找到:{totalCount} 套房房源</span>
              )}
            </p>
          </div>
          <div>
            {/* 双向绑定：housingList状态更新会自动反映到表格渲染 */}
            <Table<HousingData> 
              columns={columns} 
              dataSource={prepareData(housingList)} 
              loading={loading} 
              pagination={{
                current: currentPage,
                pageSize: pageSize,
                total: typeof totalCount === 'number' && totalCount >= 0 ? totalCount : 0,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条记录`,
                onChange: handlePageChange,
                onShowSizeChange: handlePageChange,
                pageSizeOptions: ['5', '10', '15', '20']
              }} 
            />
          </div>
    </div>
  );
}

export default withRouter(Housing);
